<template>
  <div class="competition-container">
    <!-- 搜索表单 -->
    <el-card class="search-card">
      <el-form :model="searchForm" label-position="right" label-width="100px">
        <el-row :gutter="20">
          <el-col :md="12" :lg="6">
            <el-form-item label="比赛名字">
              <el-input
                v-model="searchForm.name"
                placeholder="请输入比赛名称"
                prefix-icon="el-icon-search"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :md="12" :lg="6">
            <el-form-item label="赛事类型">
              <el-select
                v-model="searchForm.category"
                filterable
                placeholder="请选择赛事类型"
                clearable
                class="w-100"
              >
                <el-option
                  v-for="item in categoryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :md="24" :lg="8">
            <el-form-item label="比赛时间">
              <el-date-picker
                v-model="searchForm.timeRange"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00', '08:00:00']"
                class="w-100"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :md="24" :lg="4" class="text-right">
            <el-button
              type="primary"
              @click="handleSearch"
              icon="el-icon-search"
              :loading="isLoading"
            >
              查询
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 比赛列表 -->
    <el-card class="list-card">
      <div class="competition-list">
        <!-- 列表标题 -->
        <div class="list-header">
          <h3>赛事列表</h3>
          <span class="total-count">共 {{ total }} 项赛事</span>
        </div>

        <!-- 数据展示 -->
        <div class="grid-container">
          <div
            v-for="(item, i) in competitionList"
            :key="item.id"
            class="competition-card"
          >
            <!-- 可在这里插入竞赛卡片组件 -->
            <competition :item="item" :sname="systemName" />
          </div>
        </div>

        <!-- 分页组件 -->
        <el-pagination
          v-if="total > 0"
          :hide-on-single-page="
            this.total > this.searchForm.pageSize ? false : true
          "
          layout="prev, pager, next, jumper"
          :total="total"
          :page-size="searchForm.pageSize"
          :current-page="searchForm.page"
          @current-change="handlePageChange"
          class="pagination"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { reqGetAllCompetition } from "@/api";
import competition from "@/components/competition/competition.vue";
export default {
  components: { competition },
  name: "Competition",
  data() {
    return {
      searchForm: {
        name: "",
        category: "",
        timeRange: [],
        page: 1,
        pageSize: 5,
      },
      isLoading: false,
      total: 0,
      competitionList: [],
      systemName:"managecompetitionDetail",
      categoryOptions: [
        { value: "选项1", label: "理工类" },
        { value: "选项2", label: "创新创业类" },
        { value: "选项3", label: "人文社科类" },
        { value: "选项4", label: "医学类" },
      ],
    };
  },

  methods: {
    async handleSearch() {
      this.isLoading = true;
      try {
        // 统一处理 searchForm 的解构逻辑
        const { category, timeRange, ...restForm } = this.searchForm;

        // 动态决定是否需要过滤掉 category
        const dataForm =
          category === ""
            ? { ...restForm } // 当 category 为空字符串时，排除 category 和 timeRange
            : { category, ...restForm }; // 否则保留 category 并排除 timeRange

        // 统一发送请求并处理响应
        const res = await reqGetAllCompetition(dataForm);
        // console.log(res);
        if (res.code === 200) {
          this.competitionList = res.data.records;
          // 根据时间范围筛选
          const [startTime, endTime] = timeRange;
          if (startTime && endTime) {
            const start = new Date(startTime).getTime();
            const end = new Date(endTime).getTime();
            this.competitionList = this.competitionList.filter((item) => {
              const itemTime = new Date(item.startTime).getTime();
              return itemTime >= start && itemTime <= end;
            });
          }
          this.total = res.data.total;
        }
      } finally {
        this.isLoading = false;
      }
    },
    handlePageChange(page) {
      this.searchForm.page = page;
      this.handleSearch();
    },
  },
  mounted() {
    this.handleSearch();
  },
};
</script>

<style lang="scss" scoped>
$primary-color: #409eff;
$border-radius: 8px;
$spacing-unit: 1.5rem;

.competition-container {
  padding: $spacing-unit;
  background-color: #f5f7fa;

  @media (max-width: 768px) {
    padding: $spacing-unit / 2;
  }
}

// 卡片样式
.search-card,
.list-card {
  border-radius: $border-radius;
  margin-bottom: $spacing-unit;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
}

// 表单样式
.el-form {
  :deep(.el-form-item__content) {
    line-height: 40px;
  }

  :deep(.el-select) {
    width: 100%;
  }
}

// 列表样式
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: $spacing-unit;

  h3 {
    font-size: 1.25rem;
    margin: 0;
    color: #333;
  }
}

.total-count {
  font-size: 0.875rem;
  color: #888;
}

.grid-container {
  gap: 1.5rem;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.competition-card {
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-5px);
  }
}

.pagination {
  margin-top: $spacing-unit;
  text-align: center;
}
</style>
